<template>
  <section>
    <el-row style="margin: -1px 0px 0px 1px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/system/dashboard' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单信息</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" class="el-form">
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="batchDelete" :disabled="buttonDisabled">批量删除</el-button>
        </el-form-item>
        <el-form-item>
          <search-bar @SearchByCustomer="OrderList" ref="searchBar"/>
        </el-form-item>
      </el-form>
    </el-col>

    <el-card style="margin: 18px 2%;width: 95%">
      <el-table
        :data="orderList"
        stripe
        style="width: 100%"
        @selection-change="selectCheckBox"
        :max-height="tableHeight">
        <!--选择框-->
        <el-table-column type="selection" width="55"/>
        <!--Form-->
        <el-table-column prop="orderId" label="订单号" sortable/>
        <el-table-column prop="name" label="客户名" :formatter="customerFormatter" width="80"/>
        <el-table-column prop="phone" label="联系方式" fit :formatter="phoneFormatter"/>
        <el-table-column prop="descrip" label="问题描述" fit/>
        <el-table-column prop="createTime" label="录入时间" sortable width="180"/>
        <el-table-column prop="status" label="服务状态" fit>
          <template slot-scope="scope">
            <p v-if="scope.row.status===1" style="color:#0fff27">已录入</p>
            <p v-else-if="scope.row.status===2" style="color:#ff0700">已提交</p>
            <p v-else-if="scope.row.status===3" style="color:#0feeff">进行中</p>
            <p v-else-if="scope.row.status===4" style="color:#1755d7">维修结束</p>
            <p v-else-if="scope.row.status===5" style="color:#17ff0f">归还中</p>
            <p v-else-if="scope.row.status===6" style="color:#e6e6ea">完成订单</p>
          </template>
        </el-table-column>
        <el-table-column prop="category" label="所需服务" fit :formatter="categoryFormatter"/>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-tooltip content="修改" placement="bottom" effect="light">
              <el-button
                @click="editOrder(scope.row)"
                type="text"
                style="font-size: 16px"
                icon="el-icon-edit"/>
            </el-tooltip>
            <el-tooltip content="客户反馈" placement="bottom" effect="light">
              <el-button
                v-if="scope.row.status==6"
                @click="viewComment(scope.row)"
                type="text"
                style="font-size: 16px"
                icon="el-icon-chat-line-round"/>
            </el-tooltip>
            <el-tooltip content="删除" placement="bottom" effect="light" v-if="scope.row.status<3">
              <el-button
                type="text"
                style="font-size: 16px"
                @click="deleteOrder(scope.row)"
                icon="el-icon-delete"/>
            </el-tooltip>
            <el-tooltip content="确定" placement="bottom" effect="light" v-if="scope.row.status===1">
              <el-button
                type="text"
                style="font-size: 16px"
                @click="confirmOrder(scope.row)"
                icon="el-icon-s-promotion"/>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-col :span="24" class="toolbar">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 20]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-col>

    </el-card>
    <order-edit-with-add @reload="OrderList" ref="AddOrUpdate"/>
    <view-order-comment ref="viewOrderComment"/>
  </section>
</template>

<script>
import SearchBar from "./ordercomponent/SearchBar";
import OrderEditWithAdd from "./ordercomponent/OrderEditWithAdd";
import ViewOrderComment from "./ordercomponent/ViewOrderComment";

export default {
  name: "OrderManagement",
  data() {
    return {
      orderList: [],
      size: 5,
      total: 0,
      page: 1,
      checkBox: [],
      buttonDisabled: true
    }
  },
  components: {ViewOrderComment, OrderEditWithAdd, SearchBar},
  mounted() {
    this.OrderList()
  },
  methods: {
    /* 请求发送数据 */
    OrderList() {
      this.$axios.post("/orders/OrderList", {
        page: this.page,
        size: this.size,
        customerName: this.$refs.searchBar.customerName,
        status: parseInt(this.$refs.searchBar.value)
      }).then(resp => {
        if (resp && resp.status === 200) {
          this.orderList = resp.data.result
          this.total = resp.data.total
        }
      })
    },

    /* 添加订单 */
    handleAdd() {
      this.$refs.AddOrUpdate.add()
    },

    /* 修改订单 */
    editOrder(order) {
      // if (order.category.id === 4) {
      //   this.$message.warning('订单正在归还中，不能修改信息')
      // }
      this.$refs.AddOrUpdate.edit(order)
    },

    /* 删除订单 */
    deleteOrder(order) {
      this.$confirm("确定删除该订单吗", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning"
      }).then(() => {
        this.$axios.post("/orders/delete", order).then(resp => {
          if (resp.data.code === 200) {
            this.$message({
              message: resp.data.result,
              type: "success"
            })
            this.OrderList()
          }
          if (resp.data.code === 400) {
            this.$message({
              message: resp.data.result,
              type: "warning"
            })
            this.OrderList()
          }
        })
      })
    },

    /* 批量删除 */
    batchDelete() {
      this.$confirm("确定批量删除吗?", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning"
      }).then(() => {
        let checkOrder = this.checkBox
        let canDelete = new Array()
        let notDelete = new Array()
        for (let order of checkOrder) {
          if (order.status > 1) {
            notDelete.push(order.orderId)
          } else {
            canDelete.push(order)
          }
        }
        // 当选中订单中存在不能删除的订单时
        if (notDelete.length > 0) {
          this.$message({
            message: '选中订单中"' + notDelete + '"不能删除,请重新选中后操作',
            type: "warning",
            duration: 5000
          })
        } else {
          this.$axios.post("/orders/batchDelete", canDelete).then((resp) => {
            if (resp.data.code === 200) {
              this.$message(resp.data.result)
              this.OrderList()
            }
          })
        }
      }).catch(() => {
        this.checkBox = []
      })
    },

    /* 将表单提交到下一阶段 */
    confirmOrder: function (order) {
      this.$confirm("确认提交该订单吗？", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "success"
      }).then(() => {
        this.$axios.post("/orders/confirmOrder", order).then(resp => {
          if (resp.data.code === 200) {
            this.$message.success(resp.data.result)
            this.OrderList()
          }
          if (resp.data.code === 400) {
            this.$message.error(resp.data.result)
            this.OrderList()
          }
        })
      })
    },
    /*查看评论*/
    viewComment(order) {
      this.$axios.post("/comment/findComment", order).then(resp => {
        if (resp.data.code === 200) {
          if(typeof resp.data.result == "string"){
            this.$message.warning(resp.data.result)
          }

          var comment = resp.data.result.comment
          var image = resp.data.result.image
          this.$refs.viewOrderComment.reveal(order,comment,image)
        }
      })
    },
    /* 点击页面跳转 */
    handleCurrentChange(page) {
      this.page = page
      this.OrderList()
    },
    handleSizeChange(val) {
      this.size = val
      this.OrderList()
    },
    /* 获取选中数据 */
    selectCheckBox(checked) {
      if (checked.length >= 1) {
        this.buttonDisabled = false
      }
      if (checked.length < 1)
        this.buttonDisabled = true
      this.checkBox = checked
    },

    /* 处理数据格式 */
    customerFormatter(row) {
      return row.customer.name
    },
    phoneFormatter(row) {
      return row.customer.phone
    },
    categoryFormatter(row) {
      let categorylist = row.category
      let result = []
      for (let categorylistKey in categorylist) {
        result.push(categorylist[categorylistKey].name + " ")
      }
      return result
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 290
    }
  },
}
</script>

<style scoped>
.el-form {
  float: left;
  margin: 18px 27px -40px
}
</style>
